<style lang = 'less'>
.BuyExchangeConfirm{
  .select{
    position: relative;
    display: inline-block;
    width: 0.28rem;
    height: 0.28rem;
    border: 1px solid #bfbfbf;
    margin-left:0.6rem;
    margin-right:0.21rem;
    vertical-align: top;
    &>img{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
    }
  }
  .deal{
    margin-top: 0.28rem;
    padding-left: 0.3rem;
    overflow: hidden;
    &>p{
      float: left;
      width:6.43rem;
      font-size:0.26rem;
      line-height: 0.35rem;
      color: #ccc;
      .dealCheck{
        color: #3333ff;
      }
    }
    &>i{
      float: left;
      margin-left: 0px;
      margin-right: 0.15rem;
      &>img{
        vertical-align: top;
        width: 100%;
        height: auto;
      }
    }
  }
  .null-box{
    width: 100%;
    height: .2rem;
    background-color: #FAFAFA;
  }
  .submit-btn{
    width: 6.9rem;
    height: .88rem;
    background-color: #EC1B30;
    color: #FFFFFF;
    font-size: .34rem;
    text-align: center;
    line-height: .88rem;
    border-radius: .06rem;
    margin: 0.39rem auto 0;
  }
}
</style>
<template>
  <div class="dy-main BuyExchangeConfirm">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">结汇</x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <scroller lock-x style="height:100%;">
          <div class="scroller-box">
            <group gutter='.1rem' label-width="" title="">
              <cell title="结汇账号" :value="exchangeAccno"></cell>
              <div class="null-box"></div>
              <cell title="结汇金额(美元)" :value="BuyAmt"></cell>
              <cell title="本年度剩余结汇额度" :value="surplusLimit + '美元'"></cell>
              <cell title="本次结汇折合人民币" :value="changeRMBAmt+ '元'"></cell>
              <cell title="资金来源" :value="useType"></cell>
              <cell title="参考汇率" :value="changeRate"></cell>
              <cell title="入账账号" :value="exchangeAccnoEnter"></cell>
              <div class="null-box"></div>
              <popup-picker popup-title="请选择" :title="title2" :data="list3" v-model="value1_3" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="短信动态口令"></popup-picker>
              <x-input title="验证码" class="weui-vcode" v-model="userPas" placeholder="请输入短信验证码" :show-clear="false" :min="6" :max="6" @on-change="testYzm">
                <!-- <x-button slot="right" type="primary" :text="codeText" :disabled="disableCode" @click.native="postCode" mini></x-button> -->
                <a slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
              </x-input>
              <x-input title="交易密码" v-model="test2" placeholder="请输入交易密码" text-align="right"></x-input>
            </group>
            <div class="deal">
              <i class='select' @click='forginClick'><img src="../../../assets/img/Financial/selected.png" alt="" v-show="forgin"></i>
              <p>电子银行个人结售汇服务须知</p>
            </div>
            <div @click="gotoNext('SettleExchangeResult')" class="submit-btn">提交</div>
          </div>
        </scroller>
      </div>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  mounted () {

  },
  data () {
    return {
      exchangeAccno: '8764356879098',
      exchangeAccnoEnter: '8764356879098',
      BuyAmt: '898.00',
      changeRMBAmt: '4567.00',
      surplusLimit: '65423',
      useType: '职工收入',
      changeRate: '2.34',
      title2: '认证方式',
      list3: [['短信动态口令', '信息验证', '人脸识别']],
      value1_3: [],
      userPas: '', // 验证码
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      disableCode: false,
      havImg: '',
      forgin: '1'
    }
  },
  computed: { },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    onShow () {

    },
    onHide (type) {},
    onChange (val) {},
    testYzm () {
    },
    postCode () {
      let lVue = this
      lVue.codeText = (lVue.codeTime + 's后可重新发送')
      if (!lVue.isTime) {
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '发送验证码'
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 10
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新发送'
        }, 1000)
      }
      lVue.disableCode = true
    },
    forginClick: function () {
      let n = this.forgin
      if (n === 1) {
        this.forgin = 0
      } else {
        this.forgin = 1
      }
    },
    gotoNext (name) {
      this.$router.push({path: name})
    },
    refreshTest () {
      let LVm = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'M0401010', 'basic_Data': {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            LVm.prdList = response.data.data
          } else {
            LVm.aaa = response.data.data
          }
        }
      )
      // this.$router.push({name: 'FinancialBuySure', query: {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}})
    }
  },
  watch: {
  },
  created () {
    this.refreshTest()
  }
}
</script>
